<template>
  <div>
    <Breadcrumb :style="{ margin: '15px 0' }">
      <BreadcrumbItem>首页</BreadcrumbItem>
      <BreadcrumbItem>订单管理</BreadcrumbItem>
      <BreadcrumbItem>租车订单</BreadcrumbItem>
    </Breadcrumb>

    <Content class="layer-content">
      <Form inline>
        <FormItem>
          <Input style="width: 500px" v-model="keywords" search enter-button placeholder="请输入关键字" @on-search="searchGet" @submit.native.prevent/>
        </FormItem>
        <FormItem>
          <Select style="width:120px" placeholder="订单状态" clearable @on-change="selectSupplier">
            <Option v-for="item in orderStatusArray" :value="item.id" :key="item.id">{{ item.name }}</Option>
          </Select>
        </FormItem>
        <FormItem>
          <Select style="width:120px" placeholder="接收方式" clearable @on-change="selectDelivery">
            <Option :value="0">送车</Option>
            <Option :value="1">自提</Option>
          </Select>
        </FormItem>
        <FormItem>
          <Button @click="reset">重置</Button>
        </FormItem>
      </Form>
      <Table border :columns="columns2" :data="dataGrid"></Table>
      <HigPager v-model="query" :total="count" :init="init"></HigPager>
      
      <Modal width="70%" v-model="showPrintVue" title="打印预览" :footer-hide="true">
        <PrintVue ref="refPrintView" :goodsItem="orderItem"></PrintVue>
      </Modal>
      <Modal v-model="modalDelivery" :footer-hide="true" title="一键发货" width="80%">
        <delivery
          ref="refExpressView"
          :tableData="orderTable"
          :orderItem="orderItem"
          :callbank="eventAction"
          :key="keyIndex"
        ></delivery>
      </Modal>
      <Modal v-model="modalDetail" :footer-hide="true" title="订单详情" width="80%">
        <detail
          :dataGrid="orderTable"
          :orderItem="orderItem"
          :callbank="eventAction"
          :key="keyIndex"
        ></detail>
      </Modal>
    </Content>
  </div>
</template>
<script>
import detail from "./taxi-detail.vue"
import delivery from './delivery.vue'
import PrintVue from '../../print/purchase.vue'
export default {
  name: "purchase",
  data() {
    return {
      keyIndex: 0,
      rowItem: {},
      showPrintVue: false,
      keywords: null,
      orderStatusArray: this.$dict.orderStatus.data,
      modalDelivery: false,
      modalDetail: false,
      orderItem: {
        orderNotes: ''
      },
      orderTable: [],
      columns2: [
        {
          title: "订单名称",
          key: "orderName",
          width: 300
        },
        {
          title: "订单号",
          key: "shopOrderId",
          width: 190
        },
        {
          title: "订单状态",
          key: "orderStatus",
          width: 110,
          render: (h, params) => {
            return h("div", [
              h(
                "Tag",
                {
                  props: {
                    color: this.$dict.orderStatus.color(params.row.orderStatus)
                  },
                },
                this.$dict.orderStatus.name(params.row.orderStatus)
              ),
            ]);
          },
        },
        {
          title: "客户姓名",
          key: "custName",
          width: 120
        },
        {
          title: "订单数量",
          key: "goodsTotalQty",
          width: 100
        },
        {
          title: "租车天数",
          key: "bizOrderNo",
          width: 100
        },
        {
          title: "应付金额(元)",
          key: "orderPayableAmt",
          width: 120,
          render: (h, params) => {
            return h("div", [
              h("a", { style: { fontSize: "12px", color: "gray" } }, "￥"),

              h("span", params.row.orderPayableAmt.toFixed(2)),
            ]);
          },
        },
        {
          title: "接收方式",
          key: "deliveryModeText",
          width: 100
        },
        {
          title: "送车费(元)",
          key: "freightAmt",
          width: 120,
          render: (h, params) => {
            return h("div", [
              h("a", { style: { fontSize: "12px", color: "gray" } }, "￥"),

              h("span", params.row.freightAmt.toFixed(2)),
            ]);
          },
        },
        {
          title: "交易金额(元)",
          key: "orderActualAmt",
          width: 120,
          render: (h, params) => {
            return h("div", [
              h("a", { style: { fontSize: "12px", color: "gray" } }, "￥"),

              h("span", params.row.orderActualAmt.toFixed(2)),
            ]);
          },
        },
        {
          title: "退款金额(元)",
          key: "refundAmt",
          width: 120,
          render: (h, params) => {
            return h("div", [
              h("a", { style: { fontSize: "12px", color: "gray" } }, "￥"),

              h("span", params.row.refundAmt.toFixed(2)),
            ]);
          },
        },
        {
          title: "结算金额(元)",
          key: "settleAmt",
          width: 120,
          render: (h, params) => {
            return h("div", [
              h("a", { style: { fontSize: "12px", color: "gray" } }, "￥"),

              h("span", params.row.settleAmt.toFixed(2)),
            ]);
          },
        },
        {
          title: "开始时间",
          key: "orderNotes",
          sortable: true,
          width: 150,
          render: (h, params) => {
            return h("div", [h("span", this.$date(params.row.orderNotes.split(',')[0],'yyyy-MM-dd HH:mm'))]);
          },
        },
        {
          title: "结束时间",
          key: "orderNotes",
          sortable: true,
          width: 150,
          render: (h, params) => {
            return h("div", [h("span", this.$date(params.row.orderNotes.split(',')[1],'yyyy-MM-dd HH:mm'))]);
          },
        },
        {
          title: "创建时间",
          key: "postTime",
          sortable: true,
          width: 150,
          render: (h, params) => {
            return h("div", [h("span", this.$date(params.row.postTime,'yyyy-MM-dd HH:mm'))]);
          },
        },
        {
          title: "操作",
          key: "action",
          fixed: "right",
          width: 120,
          render: (h, params) => {
            return h("Dropdown",{props: {transfer:true,trigger:'click'}},
              [
                h("a",[h("a","下拉菜单"),h("Icon",{props: {type: "ios-arrow-down"}})]),
                h("DropdownMenu",{slot: "list"},
                  [
                    h("DropdownItem",{nativeOn:{click:()=>{this.openDetail(params.row)}}},"详情"),
                    h("DropdownItem",{nativeOn:{click:()=>{this.openDelivery(params.row)}},props:{disabled: params.row.orderStatus !== 1}},"发货"),
                    h("DropdownItem",{nativeOn:{click:()=>{this.printView(params.row)}}},"打印")
                  ]
                ),
              ]
            )
          }
        }
      ],
      count: 0,
      dataGrid: [],
      query: {
        pageIndex: 1,
        pageSize: 15,
        queryNeqs: [
          {
            field: "order_status", //表域名1
            value: 9, //表域值
          },
        ],
        equal: {
          orderType: 7
        },
      },
    }
  },
  created() {
    this.init()
  },
  components: {
    detail,
    delivery,
    PrintVue
  },
  methods: {
    clickBtn(index, row, name){
      console.log(name)
    },
    eventAction() {
      this.modalDelivery = false
      this.modalDetail = false
      this.keyIndex ++
      this.init()
    },
    printView(item) {
      this.orderItem = item
      this.showPrintVue = true
      this.$refs.refPrintView.init(item.shopOrderId)
      this.$refs.refPrintView.orderAddr(item.pickSiteId)
    },
    //搜索
    searchGet() {
      let sqlLike = {
        fields: ["shop_order_id", "cust_name"],
        keyword: this.keywords,
      }
      this.query.sqlLike = sqlLike
      this.query.pageIndex = 1
      this.init()
    },
    //重置
    reset() {
      delete this.query.sqlLike;
      delete this.query.equal.orderStatus;
      delete this.query.equal.deliveryMode;
      this.keywords = null;
      this.init();
    },
    selectSupplier(status) {
      this.query.equal.orderStatus = status;
      this.init();
    },
    selectDelivery(mode) {
      this.query.equal.deliveryMode = mode;
      this.init();
    },
    openDelivery(order, id) {
      if(order.orderStatus !== 1) {
        return false
      }
      this.modalDelivery = true;
      this.orderItem = order;
      this.$refs.refExpressView.init()
      new this.$rest({
        gateway: 'agrobiz',
        service: "agrobiz-order",
        url: "/v1.0/mall/goods/order/detail/page",
        query: {
          equal: {
            shopOrderId: order.shopOrderId,
          },
        },
        action: (res) => {
          if (res.data.code === 20000) {
            this.orderTable = res.data.data.list
          } else {
            this.$Notice.warning({
              title: "订单详情获取失败",
              desc: `失败原因：${res.data.msg}`,
            });
          }
        },
      }).get();
    },
    //查看详情
    openDetail(order, id) {
      this.modalDetail = true;
      this.orderItem = order;
      new this.$rest({
        gateway: 'agrobiz',
        service: "agrobiz-order",
        url: "/v1.0/mall/goods/order/detail/page",
        query: {
          equal: {
            shopOrderId: order.shopOrderId
          },
        },
        action: (res) => {
          if (res.data.code === 20000) {
            this.orderTable = res.data.data.list
          } else {
            this.$Message.error(res.data.msg)
          }
        },
      }).get()
    },
    //获取仓库门店订单，调用方包括供应商和前置仓库
    init() {
      this.query.equal.orgId = this.$store.getOrg('orgId')
      /* if (this.$store.getUser('userType') == 2) {
        //合作商户（商户自有商品，审核后可上线销售）
        this.query.equal.orgId = this.$store.getOrg('orgId')
        //联营订单
        this.query.equal.receiveMode = 0
      } else if(this.$store.getUser('userType') == 8) {
        //加盟商户(加盟终端，帮卖模式，平台提供商品)
        this.query.equal.shopId = this.$store.getShop('shopId')
        //联营订单(平台优选商品)
        this.query.equal.receiveMode = 1
      } else if(this.$store.getUser('userType') == 9) {
        //平台运营商
        //自营订单(平台优选商品)
        this.query.equal.receiveMode = 0
      } */
      new this.$rest({
        gateway: 'agrobiz',
        service: "agrobiz-order",
        url: "/v1.0/view/mall/order/info/page",
        query: this.query,
        action: (res) => {
          if (res.data.code === 20000) {
            this.dataGrid = res.data.data.list
            this.dataGrid.forEach(element => {
              element.deliveryModeText = element.deliveryMode === 0 ? '送车' : '自提'
            })
            this.count = res.data.data.count
          } else {
            this.$Notice.warning({
              title: "获取失败",
              desc: `失败原因：${res.data.msg}`,
            });
          }
        },
      }).get();
    },
  },
};
</script>